<!--手机电脑适配插槽-->
<template>
  <el-row>
    <el-col :md="12-numOf24/2"
            :style="{'display': viewSize<900?'none':'block'}">
      <div class="grid-content bg-purple">
      </div>
    </el-col>
    <el-col :md="numOf24">
      <div ref="mid" class="grid-content bg-purple-light">
        <slot></slot>
      </div>
    </el-col>
    <el-col :md="12-numOf24/2"
            :style="{'display': viewSize<900?'none':'block'}">
      <div class="grid-content bg-purple">
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: 'Adaption',
  data () {
    return {
      viewSize: window.innerWidth
    }
  },
  props: {
    numOf24: {
      type: Number,
      default: 14
    }
  }
}
</script>

<style scoped>
.grid-content {
  border-radius: 4px;
  min-height: 61px;
}
</style>
